<template>
	<div class="collectionSong">
		<div class="collectionSongBox">
			<div class="SongTitle">
				<img @click="SongButton" :class="{'donghua2': !isShow}" src="../../../assets/images/下划.png"/>
				<p>收藏的歌单<span>({{arr3.length}})</span></p>
				<img class="img3" src="../../../assets/images/加号(2).png"/>
				<img src="../../../assets/images/更多 (2).png"/>
			</div>
			<div class="LoveSongBox" v-show="isShow">
				<div class="LoveSong" v-for="err in arr3" :key="err.id">
					<div class="LoveSongLeft">
						<img :src="err.coverImgUrl"/>
						<div class="LoveSongTitleBox">
							<p>{{err.name}}</p>
							<div>
								<img src="../../../assets/images/打钩.png"/>
								<p>{{err.trackCount}}首, <span>by {{err.creator.nickname}}</span></p>
							</div>
						</div>
					</div>
					<img src="../../../assets/images/更多.png"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"collectionSong",
		data(){
			return{
				isShow: true,
				arr:sessionStorage.getItem("cSsearr") ? JSON.parse(sessionStorage.getItem("cSsearr")) : "",
				arr2:[],
				arr3:sessionStorage.getItem("cSsearr3") ? JSON.parse(sessionStorage.getItem("cSsearr3")) : []
			}
		},
		methods: {
			SongButton() {
				this.isShow = !this.isShow
			}
		},
		created(){
			
		},
		mounted(){
			let _token = this.$store.state.token
			if(!JSON.parse(sessionStorage.getItem('cSsearr'))){
				console.log("不存在")
				this.$http.get("/user/playlist", {
					params: {
						uid : _token
					}
				}).then(res=>{
					this.arr = res.data.playlist
//					console.log(this.arr)
					sessionStorage.setItem('cSsearr', JSON.stringify(this.arr));
//					console.log(JSON.parse(sessionStorage.getItem("cSsearr")))
					console.log(this.arr)
//			console.log(this.arr3)
					for(let i=0;i<this.arr.length;i++){
						if (this.arr[0].userId == this.arr[i].userId){
							this.arr2.push(this.arr[i])
						}
						else{
							this.arr3.push(this.arr[i])
						}
					}
					this.arr2[0].name = "我喜欢的音乐"
//					sessionStorage.setItem('cSsearr2', JSON.stringify(this.arr2));
					sessionStorage.setItem('cSsearr3', JSON.stringify(this.arr3));
					this.$parent.$emit("tosibling",this.arr2)
					
				}).catch(() => {
					this.$toast('密码错误');
					console.log("密码错误")
				})
			}
			console.log(this.arr)
			console.log(this.arr3)
		}
	}
</script>

<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.collectionSong{
		width: 100%;
		display: flex;
		justify-content: center;
		.collectionSongBox{
			width: 92%;
			.SongTitle{
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: vw(15) 0;
				align-items: center;
				img{
					width: vw(16);
					height: vw(16);
				}
				img:first-child{
					transition: 0.5s all;
				}
				p{
					display: flex;
					align-items: center;
					font-size: vw(16);
					font-weight: bold;
					height: vw(16);
					line-height: vw(16);
					padding: vw(0) vw(130) 0 0;
					span{
						margin-left: vw(6);
						font-size: vw(12);
						color: #a3a3a3;
					}
				}
				.img3{
					margin-right: vw(10);
				}
			}
			.LoveSong{
				padding: vw(10) 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.LoveSongLeft{
					width: 90%;
					display: flex;
					align-items: center;
					overflow :hidden;
					>img{
						width: vw(60);
						height: vw(60);
						background: black;
						border-radius: vw(6);
					}
					.LoveSongTitleBox{
						display: flex;
						flex-direction: column;
						margin-left: vw(10);
						>p{
							font-size: vw(14);
							max-width: 100%;
						}
						div{
							font-size: 0;
							margin-top: vw(5);
							img{
								vertical-align: top;
								width: vw(18);
								height: vw(18);
								margin-right: vw(10);
							}
							p{
								display: inline-block;
								font-size: vw(12);
								color: #898989;
								span{
									font-size: vw(12);
									color: #898989;
									margin-left: vw(4);
								}
							}
						}
					}
				}
				>img{
					width: vw(20);
					height: vw(20);
				}
			}
		}
	}
	.donghua2 {
		transform: rotate(-90deg);
		transition: 0.5s all;
	}
</style>